<template>
	<view>
		<meta name="referrer" content="never" />
		<view class="center" style="width: auto;">
			<textarea class="area" v-model="shareUrl" placeholder="请输入抖音分享的链接"></textarea>
		</view>
		<button class="btn" type="primary" @click="getDouyin" >解析</button>
		<button class="btn" type="warn" @click="clear" >清空</button>
		<!-- 音频播放 -->
		<!-- <view v-show="music.src" class="music-view" style="text-align: center;">
			<audio style="text-align: left" :src="music.src" :poster="music.poster" :name="music.name" :action="audioAction" controls></audio>
		</view> -->
		
		<!-- 视频组件 -->
		<view v-show="videoSrc">
			<view style="width: 100%; height: auto; margin-top: 20px;" class="center">
				<video
				  :src="videoSrc"
				  autoplay
				  style="width: 100%;"
				/>
			</view>
			
			<button class="btn" type="primary" @click="down()" >保存视频</button>
		</view>
		
		<scroll-view scroll-y show-scrollbar style="margin-top: 20px;" v-show="imageList.length > 0">
			<view v-for="(img, index) in imageList" :key="index">
				<view class="image-view">
					<image :src="img" mode="widthFix" lazy-load @click="priviewBigImage(index)" style="width: 100%;"></image>
				</view>
				<button type="primary" @click="down(img)" class="saveImgBtn">保存</button>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 分享的链接
				shareUrl: null,
				// 音频对象
				music: {
					poster: '',
					name: '',
					src: '',
				},
				audioAction: {
					method: 'pause'
				},
				videoSrc: '',
				imageList: [],
			}
		},
		onShow() {
			uni.getClipboardData({
				  success: res=> {
					if(res.data.match(/douyin\.com\/(\S*)\//)){
						this.shareUrl = res.data;
					}
				}
			});
		},
		methods: {
			/* 获取抖音解析后的信息 */
			getDouyin(){
				if(this.shareUrl){
					let str = "https://v.douyin.com/" + this.shareUrl.match(/douyin\.com\/(\S*)\//)[1] +"/";
					let url = '/dy/get?shareUrl='+ encodeURIComponent(str);
					
					this.http.httpRequest(url, 'get').then(resp => {
						let dy = resp.data;
						this.music.src = dy.musicUrl;
						this.music.name = dy.musicTitle;
						this.music.poster = dy.musicPhoto;
						this.videoSrc = dy.noWatermarkUrl;
						this.imageList = dy.photos;
					})
				}else{
					uni.showToast({
						title: "链接不能为空！",
						icon: "none"
					});
				}
			},
			/* 清空 */
			clear(){
				this.shareUrl = "";
				
				let request = require("request");
				request({
					url:'https://www.baidu.com',
					/* header: { 
						'Access-Control-Allow-Origin': 'https://www.baidu.com',
						'Origin' : 'http://localhost:8080'
					} */
					}, function (error, response, body) {
				       console.log(body)//打印百度首页html内容
					   uni.showToast({
					   	title: body,
					   	icon: "none"
					   });
				})
			},
			// 下载
			down(url){
				if(!url){
					url = this.videoSrc;
				}
				uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.hideLoading()
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.hideLoading()
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						}
					}
				});
			},
			// 图片预览
			priviewBigImage(index){
				uni.previewImage({
					current: index,
					urls: this.imageList
				});
			},
		}
	}
</script>

<style>
	.center {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.area {
		border: #000000 solid 1px; 
		width: 90%; 
		padding: 5px;
	}
	.btn {
		width: 50%;
		margin-top: 10px;
	}
	.music-view {
		margin-top: 10px;
	}
	.video-view {
		width: 90%;
		height: 50%;
	}
	.saveImgBtn {
		width: 20%;
		height: 30px;
		line-height: 30px;
		margin-top: 5px;
	}
	.image-view {
		width: 100%; 
		height: auto; 
		margin-top: 10px;
	}
</style>
